<template>
  <div v-if="IntNum > 0">{{ data.num.toFixed(0) }}</div>
  <div v-else>{{ data.num.toFixed(2) }}</div>
</template>

<script setup>
import { reactive, ref, defineProps, watch } from 'vue'
import gsap from 'gsap'

// 动画对象
const data = reactive({
  num: 0
})

// 接受组件传值
const props = defineProps({
  value: {
    type: Number,
    default: 0
  }
})

// 使用gsap动画
function AnimateToValue () {
  gsap.to(data, {
    num: props.value,
    duration: 1
  })
}
// 触发动画
AnimateToValue()

// 整数的判断
const IntNum = ref(0)
if (props.value % 1 === 0) {
  IntNum.value = props.value
}

// 监听数据变化
watch(
  () => props.value, //  监听对象
  () => AnimateToValue() //  监听回调
)
</script>

<style lang="scss" scoped></style>
